<template>
  <div>
    <!-- 头部展示开始 -->
    <div class="playbox">
      <div class="play">
        <div class="header">
          <span @click="fun()">&lt;</span>
          <p>游玩笔记</p>
        </div>
        <div class="footer"></div>
      </div>
    </div>
    <!-- 滑动条 -->
    <div class="mid">
      <div class="all">
        <p class="upo">全部</p>
        <p class="mid">快食主义</p>
        <p class="down">全部</p>
      </div>
    </div>
    <!-- 图片mock -->
    <div class="playpicbigbox">
      <div class="playpicbox">
        <div class="playpic" v-for="(v, i) in arr" :key="i + 1">
          <div>
            <img :src="v.imgsrc" alt />
            <!-- <p class="ditu">
              <span class="iconfont icon-ditu"></span>
              {{ v.h5 }}
              <span class="line">|</span>
              <span>7.8</span>km
            </p> -->
            <p class="txt">{{ v.p }}</p>
            <div class="headeport">
              <div class="le">
                <img :src="v.imgsrc" alt />
                <span>{{ v.p2 }}</span>
              </div>
              <div class="ri">
                <span class="iconfont icon-dianzan" id="iconfont"></span>
                <span>2</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      arr: [],
    };
  },
  mounted() {
    axios.request("http://localhost:8889/Snotes").then((ok) => {
      console.log(ok);
      this.arr = ok.data;
    });
  },
  methods: {
    fun() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.playbox {
  width: 100%;
  .play {
    width: 91.733vw;
    margin: auto;
    .header {
      width: 91.733vw;
      height: 8.8vw;
      line-height: 8.8vw;
      display: flex;
      font-size: 3.733vw;
      p {
        margin-left: 29.867vw;
        font-weight: 545;
      }
    }
  }
}
.mid {
  width: 100%;
  .all {
    margin: auto;
    width: 91.733vw;
    display: flex;
    text-align: center;
    line-height: 7.2vw;
    margin-top: 2.4vw;
    font-size: 2.4vw;
    .upo {
      width: 13.333vw;
      height: 7.2vw;
      border-radius: 2.667vw;
      margin-right: 1.333vw;
      background-color: #ffeee7;
      color: #f68f7e;
    }
    .mid {
      width: 25.6vw;
      height: 7.2vw;
      border-radius: 2.667vw;
      background-color: #f6f6f6;
      margin-right: 1.333vw;
    }
    .down {
      width: 20.267vw;
      height: 7.2vw;
      border-radius: 2.667vw;
      background-color: #f6f6f6;
    }
  }
}
.playpicbigbox {
  width: 100%;
  margin-top: 2.4vw;
  .playpicbox {
    width: 91.733vw;
    margin-top: 5.6vw;
    flex-wrap: wrap;
    display: flex;
    margin: auto;
    .playpic {
      margin: auto;
      // width: 91.733vw;
      // display: flex;
      // flex-wrap: wrap;
      // justify-content: space-between;
      div {
        width: 42.467vw;
        height: 64.8vw;
        position: relative;
        .ditu {
          position: absolute;
          top: 40.533vw;
          left: 1.867vw;
          color: #f6f6f6;
          .line {
            margin: 0 1.333vw;
          }
        }
        img {
          width: 41.467vw;
          height: 47.2vw;
        }
        .txt {
          width: 42vw;
          margin-bottom: 0.8vw;
          text-align: left;
          font-size: 2.667vw;
          // overflow-wrap:warp;
        }
        .headeport {
          display: flex;
          justify-content: space-between;
          .le {
            text-align: left;
            img {
              width: 4.533vw;
              height: 4.533vw;
              border-radius: 2.4vw;
            }
            span {
              margin-left: 0.8vw;
              font-size: 2.667vw;
            }
          }
          .ri {
            text-align: right;
            margin-bottom: 4vw;
          }
        }
      }
    }
  }
}
</style>